<template>
  <el-config-provider :locale="locale">
    <RouterView />
  </el-config-provider>
</template>

<script setup>
import {ref, onMounted } from 'vue';
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

const locale = ref(zhCn);

onMounted(() => {
  // 背景图片
  let bgImgStyle = "background-image:url('./images/bg/" + Math.ceil(Math.random() * 27) + ".jpg');";
  document.querySelector('body').style = bgImgStyle;
})
</script>

<style>
body {
  width: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

@media (max-width: 575.98px) {
  body {
    background-size: auto;
    background-position: 100% center;
  }
}

.glass {
    backdrop-filter: blur(4px) !important;
    background-color: rgba(255, 255, 255, 0.4) !important;
}

html.dark .glass{
    background-color: rgba(0, 0, 0, 0.4) !important;
}
</style>
